<template>
	<view class="content">

		<!-- 列表 -->
		<view class="content-hender">
			<view class="content-list" v-for="(item,index) in list" :key='item.id'>
				<view class="list-header">
					<view class="left">
						<view>
							<image class="icImage" src="../../static/img/time.png.png" mode=""></image>
						</view>
						<view>{{item._add_time}}</view>
					</view>
					<view class="right">
						<view>
							<view class="status"> {{item._status}}</view>
							<view class="statusColor">
								<!-- {{ item.en}} -->
							</view>
						</view>


					</view>
				</view>
				<view class="list-name">
					<view @click="godetail(item.id)">
						<view>
							姓名:<span>{{ item.name}}</span> <span class='cartPeople'>{{ item.type==1?'车主':'操作员'}}</span>
						</view>
						<view class="phone">
							电话:<span>{{ item.mobile}}</span>
						</view>
						<view class="phone">
							车牌号:<span>{{ item.car_number}}</span>
						</view>
					</view>
					<view @click="cancelorder(item.id,index)" class="btn">
						<view class="closeOrder">
							<view class="btnClose">取消订单</view>
							<view class="btnLang">
								ئەمەلدىن قالدۇرماق
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- //空状态 -->
		<view class="empty" v-if="!list.length">
			<view>暂无报修记录</view>
		</view>
		<!-- button -->
		<view @click="goaddrepair" class="footer_button">
			<view class="subCommit">
				<view class="conBtn">
					<uni-icons type="plusempty" size="20" color="#fff"></uni-icons> 添加报修
				</view>
				<view class="btnLang">
					رېمونت قىلىش قوشۇش
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				finshed: false,
				list: [],
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			//添加保修

			goaddrepair() {
				app.nto('carRepair/addcarrepair')
			},
			// 去详情
			godetail(id) {
				app.nto('carRepair/addcarrepair', id)
			},
			//取消订单
			cancelorder(id, index) {
				app.confirm('是否取消该订单？', (res) => {
					app.load()
					let data = {
						id,
					}
					app.request('repair_del', data, 'POST').then(res => {
						this.list.splice(index, 1)
						app.hide()
					})
				}, () => {})
			},
			//获取车辆列表
			getlist() {
				app.load()
				let data = {
					page: this.page,
					limit: this.limit
				}
				app.request('repair_list', {}).then(res => {
					if (this.page == 1) {
						this.list = []
					}
					this.list = this.list.concat(res.data.list)
					if (res.data.list.length < this.limit) {
						this.finshed = true
						app.hide()
					}
				})
			},

		},
		onReachBottom() {
			if (!this.finshed) {
				this.page++
				this.getlist()
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background: #F5F5F5;
		font-family: PingFang SC;
		padding-bottom: 130rpx;
	}

	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
		padding: 19rpx;

	}

	.tab-name {
		font-size: 30rpx;
		font-weight: 500;
	}

	.activeName {
		border-bottom: 1px solid red;
	}

	.tab-lang {
		font-size: 24rpx;
		font-weight: 400;
	}

	.inv-h-w {
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0rpx 20rpx;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.inv-h {
		font-size: 30rpx;
		flex: 1;
		text-align: center;
		color: #999999;
		padding: 20rpx 0 15rpx 0;
	}

	.inv-h-se {
		color: #FFC03C;
		border-bottom: 4rpx solid #FFC03C;
	}

	.content-hender {
		padding: 20rpx;
	}

	.content-list {
		background: #FFFFFF;
		padding: 0rpx 28rpx 20rpx 24rpx;
		margin-bottom: 20rpx;
	}

	.cartPeople {
		padding: 3rpx 8rpx;
		background: #FFFFFF;
		border: 1rpx solid #FFC03C;
		border-radius: 2rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFC03C;
	}

	.list-header {
		border-bottom: 1px solid #F5F5F5;
		padding: 18rpx 0;
	}

	.left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}

	.left .icImage {
		display: block;
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
	}

	.empty {
		padding-top: 150rpx;
		text-align: center;
		color: #666666;
		font-size: 30rpx;
	}

	.zwkpImg {
		width: 138rpx;
		height: 138rpx;
	}

	.list-header {
		display: flex;
		justify-content: space-between;
	}

	.right {
		display: flex;
		flex-direction: column;
	}

	.status {
		font-size: 24rpx;
		font-weight: 500;
		color: #FFC03C;
		text-align: right;
	}

	.statusColor {
		font-size: 20rpx;
		font-weight: 500;
		color: #FFC03C;
		margin-top: 10rpx;
	}

	.list-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		padding-top: 29rpx;
	}

	.list-name span {
		margin-left: 20rpx;
	}

	.phone {
		margin-top: 30rpx;
	}

	.refuse {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #FF3C3C;
	}

	.refuse .activeImage {
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.footer_button {
		width: 100%;
		padding: 23rpx 0 15rpx 0;
		background: #FFC03C;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.closeOrder {
		padding: 5rpx 20rpx;
		border: 1rpx solid #BFBFBF;
		border-radius: 10rpx;
		text-align: center;
		color: #333333;
	}

	.btnLang {
		font-size: 24rpx;
		font-weight: 400;

	}

	.btnClose {
		font-size: 30rpx;
		font-weight: 500;
	}

	.btn {
		display: flex;
		justify-content: flex-end;
		border-top: 1px solid #F5F5F5;
		margin-top: 30rpx;
		padding: 20rpx 0 10rpx 0;
	}

	/* 选项卡二表单 */
	.addTop {
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.nameBox {
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999999;
	}

	.nameText {
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0 68rpx 0;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #999999;
	}

	.nameBox:nth-last-child(1) {
		border-bottom: 0rpx #eee solid;
	}

	.nameLeft {
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 30rpx;
		color: #333333;
	}

	.wyynae {
		padding-top: 18rpx;
	}

	.nameRight {
		display: flex;
		align-items: flex-end;
		align-items: center;
	}

	.inputRight {
		display: flex;
		flex-direction: column;
		text-align: right;
	}

	.iconLeft {
		margin-left: 30rpx;
		width: 9rpx;
		height: 16rpx;
	}

	.inputname {
		font-size: 30rpx;
		text-align: right;
		max-width: 300rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.center {
		font-size: 30rpx;
		color: #999999;
	}

	.downText {
		margin-top: 50rpx;
	}

	/* 上传 */
	/* 上传 */
	.upLoad {
		padding: 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.upLoad_title {
		font-size: 30rpx;
	}

	.upLoadLang {
		font-size: 24rpx;
	}

	.showimg_box {
		display: flex;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.show_img {
		width: 218rpx;
		height: 218rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
	}

	.imgAdd {
		margin-top: 40rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.btnUpload {
		font-size: 24rpx;
		font-weight: 500;
	}

	.imgLang {
		font-size: 18rpx;
	}

	.images {
		display: block;
		width: 210rpx;
		height: 210rpx;
		z-index: 999;
	}

	.imgarr {
		display: flex;
		align-items: center;
		position: relative;
		margin: 0 10rpx;
	}

	.icon-cuo {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}

	.closeImage {
		display: block;
		width: 26rpx;
		height: 26rpx;
	}

	/* 上传身份证 */
	.upLoadPeople {
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.positivePeople {
		width: 100%;
		height: 360rpx;
		border: 1rpx solid #eee;
		margin: 20rpx 0;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
		color: #999999;
		position: relative;
	}

	.addimg {
		font-weight: 500;
		font-size: 60rpx;
		margin-top: 60rpx;
	}

	.btnPeople {
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 25rpx;
	}

	.positiveImages {
		display: block;
		width: 100%;
		height: 360rpx;
	}

	.closeImage {
		position: absolute;
		right: 0;
		top: 5rpx;
		color: #FFFFFF;
		z-index: 1000;
		border-radius: 50%;
	}

	/* 提交 */
	.footer_button {
		width: 100%;
		padding: 23rpx 0 15rpx 0;
		background: #FFC03C;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 122;
	}

	.subCommit {
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.conBtn {
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}

	.btnLang {
		font-size: 24rpx;
		text-align: center;
	}
</style>
